<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js_evnet02</title>
	<meta name="author" content="Stark" />
	<!-- Date: 2018-10-15 -->
	<script type="text/javascript">
		// 当窗口加载完毕之后才执行init方法，这样可以省略body中的onload
		// 所以如果希望使用如下的事件定义方式，需要先完成html信息的加载
		window.onload = init;
		// 此时init方法是在body的onload之后执行，就等于在所有页面标签加载完毕之后才执行init，此时节点就存在了
		function init() {
			var btn = document.getElementById("btn");
			/**
			 * 如下绑定的方式带来最大的一个问题是如果将该段代码放到head中定义，在执行到绑定事件的时候并没有把html的标签
			 * 渲染出来，所以通过DOM得到的节点都是null，就报错了，解决问题的方法就是在页面加载完成后再调用一下这段代码
			 * 可以在body的onload事件来处理
			 */
			btn.onclick = function(evnet) {
				// 特别注意：对于IE而言不会自动传递这个event参数进去，需要window.event来获取事件,但FF不支持window.event
				// 所以通常使用如下方式解决
				event = event||window.event;
				alert(event.type);
				// this表示这个按钮对象
				alert(this.value);
			}
		}
	</script>
</head>
<body>
	<ul>
		<li>sssssssss</li>
		<li>aaaaaaaa</li>
		<li>bbbbbbbbbbb</li>
		<li>vccccccccccc</li>
		<li>dddddddd</li>
		<li>22222222222</li>
		<li>ffffffffffff</li>
	</ul>
	<input type="button" value="点击一下" id="btn"/>
	
</body>
</html>

